<link href="/js/plugins/jqPaginator/jqPagination.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/js/plugins/jqPaginator/jq-paginator.min.js"></script>
<ul class="clearfix">


<#list pageInfo.list as dest>
<li class="item">
    <div class="img">
        <a href="/destination/guide?id=${dest.id}" target="_blank">
            <img height="200" width="320" src="${dest.coverUrl!}" style="display: inline;">
            <div class="title">${dest.name}</div>
        </a>
    </div>

<div class="info">
    <p class="detail">${dest.info!"暂无简介"}</p>
    <#if dest.scenicDetails?? && (dest.scenicDetails?size > 0)>
    <div class="hot">
        <span class="label">TOP3</span>
        <#list dest.scenicDetails as scenicDetail>
        <a href="/scenic/list?destId=${dest.id}" target="_blank" title="${(scenicDetail.name)!}">${(scenicDetail.name)!}</a>
        <span class="divide"></span>
        </#list>
    </div>
    </#if>
    <div class="line"><a href="/destination/guide?id=${dest.id}" target="_blank"><em>1</em>${dest.name}经典线路</a></div>
</div>
</li>
</#list>
</ul>

<div style="float: right">
    <div style="float: left;" ><span style="line-height:30px"> 共${pageInfo.pages}页 / ${pageInfo.total}条&nbsp;&nbsp;&nbsp;</span></div>
    <div id="pagination" class="jq-pagination" style="display: inline;"></div>
</div>
<script>
    $("#pagination").jqPaginator({
        totalPages: ${pageInfo.pages}||1,
            visiblePages: 5,
            currentPage: ${pageInfo.pageNum}||1,
            prev: '<a class="prev" href="javascript:void(0);">上一页<\/a>',
            next: '<a class="next" href="javascript:void(0);">下一页<\/a>',
            page: '<a href="javascript:void(0);">{{page}}<\/a>',
            last: '<a class="last" href="javascript:void(0);" >尾页<\/a>',
            onPageChange: function(page, type) {
        if(type == 'change'){
            $("#currentPage").val(page);

            $.get("/destination/listByThemeIds", {
                monthId: ${qo.monthId},
                themeId: ${qo.themeId},
                dayId: ${qo.dayId},
                currentPage: page
            }, function (data) {
                if (data) {
                    $(".row-list .clearfix").html('');
                    $(".row-list .clearfix").append(data);
                }
            });
        }

        }
    })
</script>